<html>
<head>
    <title>手机控制页</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <!--不推荐使用script引用钉钉组件，做起来很麻烦，建议使用npm安装钉钉相关组件-->
    <!--文档和网址https://ding-doc.dingtalk.com/doc#/dev/welcome-to-lark-->
    <script src="https://g.alicdn.com/dingding/dingtalk-jsapi/2.10.3/dingtalk.open.js"></script>

</head>
<body>
<script type="text/javascript">
    //调用ajax函数
    function alertTest(phoneId, videoType) {
        $.ajax({
            url: '/api.go/?phoneId={phoneId}&isAlert=1&videoType={videoType}&secretKey=hj83YSKDLnmd7924KKsakksh'.replace("{phoneId}", phoneId).replace("{videoType}", videoType),
            // url: 'http://123.206.57.75/api.go/?phoneId=test&isAlert=1&secretKey=hj83YSKDLnmd7924KKsakksh',
            // data: {'phoneId': "test123", "isAlert": 1, 'secretKey': 'hj83YSKDLnmd7924KKsakksh'},
            // dataType: "jsonp",
            dataType: "json",
            type: 'get',
            success: function (data) {
                if (data.state == 200) {
                    alert(phoneId + ' 振铃下发成功');
                } else {
                    alert('失败');
                }
            }
        }).done().fail().always();

    }

    function getMsg() {
        $.ajax({
            url: '/stateMsg.go/',
            // url: 'http://123.206.57.75/api.go/?phoneId=test&isAlert=1&secretKey=hj83YSKDLnmd7924KKsakksh',
            // data: {'phoneId': "test123", "isAlert": 1, 'secretKey': 'hj83YSKDLnmd7924KKsakksh'},
            // dataType: "jsonp",
            dataType: "json",
            type: 'get',
            success: function (response) {
                if (response.state == 200) {
                    if (response != null) {
                        if (response.data != null) {
                            $("#mainTable").empty();
                            var tableTitle = "<tr><th>选项</th><th>手机ID</th><th>指令</th> <th>手机状态</th><th>最后心跳时间</th></tr>";
                            $(tableTitle).appendTo($("#mainTable"));
                            $.each(response.data, function (i, k) {
                                if (k) {
                                    // 人工下载
                                    var phoneId = i;
                                    var lastTime = k.lastTime;
                                    var isAlert = k.isAlert;
                                    var phoneState = k.phoneState;
                                    var tipContent = "<tr><td><input type=\"checkbox\" style=\"width:50px;height:50px\" name=\"" + phoneId + "\"></td><td>" + phoneId + "</td><td>" + isAlert + "</td><td>" + phoneState + "</td><td>" + lastTime + "</td></tr>";
                                    $(tipContent).appendTo($("#mainTable"));
                                }
                            });
                        }

                    }
                } else {
                    alert('失败');
                }
            }
        }).done().fail().always();

    }

    function alertButton(videoType) {
        $("input[type='checkbox']").each(function () {
            if ($(this).is(':checked')) {
                var phoneId = $(this).attr("name");
                alertTest(phoneId, videoType);
                getMsg()
            }
        });
    }

    getMsg()
</script>
<script>
    setInterval(function () {
        getMsg()
    }, 60000);
</script>
<div>
    <img src="http://byb-pic.oss-cn-shenzhen.aliyuncs.com/beyebe/data/20200608/43f7c2e9994ecfb73573178661b4f550.jpeg"
         style="width: 80%;margin: 0% 10%">
    <div>
        <h1 style="width: 80%;">指定手机控制后台DEMO</h1>
    </div>
    <div>
        <div>
            <BUTTON type="button" onclick="alertButton(0);"
                    style="height: 100px;width: 24%;float:left;font-size: larger">
                语音0
            </BUTTON>
            <BUTTON type="button" onclick="alertButton(1);"
                    style="height: 100px;width: 24%;float:none;font-size: larger">
                语音1
            </BUTTON>
            <BUTTON type="button" onclick="alertButton(2);"
                    style="height: 100px;width: 24%;float:none;font-size: larger">
                语音2
            </BUTTON>
            <BUTTON type="button" onclick="alertButton(3);"
                    style="height: 100px;width: 24%;float:none;font-size: larger">
                语音3
            </BUTTON>

        </div>
        <div>
            <BUTTON type="button" onclick="alertButton(4);"
                    style="height: 100px;width: 24%;float:left;font-size: larger">
                语音4
            </BUTTON>
            <BUTTON type="button" onclick="alertButton(5);"
                    style="height: 100px;width: 24%;float:none;font-size: larger">
                语音5
            </BUTTON>
            <BUTTON type="button" onclick="alertButton(6);"
                    style="height: 100px;width: 24%;float:none;font-size: larger">
                语音6
            </BUTTON>
            <BUTTON type="button" onclick="alertButton(7);"
                    style="height: 100px;width: 24%;float:none;font-size: larger">
                语音7
            </BUTTON>

        </div>

    </div>
    <div>
        <TABLE id="mainTable" border="1" style="width: 80%;margin: 0%  10%;font-size: 30px"></TABLE>
    </div>
</div>

</body>
</html>